<template>
  <div class="cover">
    <el-upload :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :action="`/merchant/common/upload`" :file-list="fileList" list-type="picture-card" class="avatar-uploader">
      <!-- <img v-if="coverCopy" :src="coverCopy" class="avatar"> -->
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :lock-scroll="true" :append-to-body="true" size="tiny">
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
    <div class="desc">图片大小（{{ ratio }}）</div>
  </div>
</template>

<script>
export default {
  name: 'Cover',
  props: {
    cover: {
      type: String,
      default: ''
    },
    ratio: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      covers: '',
      coverCopy: '',
      fileList: [],
      remove: true
    }
  },
  watch: {
    covers(cover) {
      this.$emit('cover', cover)
    },
    cover(cover) {
      if (!this.fileList.length && this.remove) {
        this.covers = cover
        this.coverCopy = cover
        this.dialogImageUrl = cover
        this.fileList.push({
          name: '1.png',
          url: cover
        })
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.covers = this.cover
      this.coverCopy = this.cover
      this.dialogImageUrl = this.cover
      if (this.cover) {
        this.fileList.push({
          name: '1.png',
          url: this.cover
        })
      }
    },
    handleAvatarSuccess(res, file, fileList) {
      this.remove = true
      this.fileList = fileList
      if (fileList.length > 1) {
        this.fileList.splice(0, 1)
      }
      const { path } = res.data
      this.coverCopy = URL.createObjectURL(file.raw)
      this.covers = path
    },
    beforeAvatarUpload(file) {
      this.dialogImageUrl = URL.createObjectURL(file)
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
    },
    handleRemove(file) {
      this.remove = false
      this.coverCopy = ''
      this.fileList = []
      this.dialogImageUrl = ''
      this.covers = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.cover{
  .el-icon-plus {
  // border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  }
  .el-icon-plus:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    margin-right: 20px;
    border-radius: 6px;
    cursor: pointer;
  }
  .desc {
    font-size: 12px;
    color: #99a9bf;
    line-height: 30px;
  }
}
</style>
